<template>
    <div class="time">
        <div>
            您好，现在是{{wwnow}}
        </div>
        <div style="margin-top: 10px;margin-left:80px;font-size: 22px;">
            {{ state.hour }}:{{ state.min }}
        </div>
    </div>
</template>

<script>
import { computed, onMounted, reactive } from 'vue';

export default {
    setup () {
        const state = reactive({
            hour:new Date().getHours(),
            min:new Date().getMinutes()
        })
        onMounted(()=>{
            changeTime()
        })
        // 时刻变化时间
        const changeTime = () =>{
            setTimeout(()=>{
                let min = new Date().getMinutes()
                if(min<10){
                    let count = new Date().getMinutes().toString()
                    state.min = '0'+ count
                }else{
                    state.min = new Date().getMinutes()
                }
                if(state.min === 0){
                    state.hour = new Date().getHours()
                }
            },0)
            setInterval(()=>{
                let min = new Date().getMinutes()
                if(min<10){
                    let count = new Date().getMinutes().toString()
                    state.min = '0'+ count
                }else{
                    state.min = new Date().getMinutes()
                }
                if(state.min === 0){
                    state.hour = new Date().getHours()
                }
            },60000)
        }
        // 监听当前时间
        const wwnow = computed(()=>{
            let s = ernow(state.hour)
            return state.hour.toString().slice(0,0) + s
        })
        const ernow = (hour) =>{
            hour = Number(hour)
            if(0<=hour && hour<6){
                return '凌晨'
            }else if(6<=hour && hour<8){
                return '早上'
            }else if(8<=hour && hour<12){
                return '上午'
            }else if(12<=hour && hour<14){
                return '中午'
            }else if(14<=hour && hour<17){
                return '下午'
            }else if(17<=hour && hour<19){
                return '傍晚'
            }else if(19<=hour && hour<22){
                return '晚上'
            }else if(22<=hour && hour<24){
                return '深夜'
            }
        }
        

        return {state,wwnow}
    }
}
</script>

<style lang="less" scoped>
.time{
    padding: 30px 20px 0px 40px;
    box-sizing: border-box;
}
</style>